<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div layout="row" flex class="api-events" style="margin-top: 20px;">
  <div class="api-history-timeline" flex="20">
    <timeline>
      <div ng-repeat="eventTimeline in apiHistoryCtrl.eventsTimeline">
        <timeline-event side="right">
          <timeline-badge class="{{eventTimeline.badgeClass}}">
            <i class="glyphicon {{eventTimeline.badgeIconClass}}"></i>
          </timeline-badge>
          <a class="timeline-link" ng-click="apiHistoryCtrl.selectEvent(eventTimeline)">
            <timeline-panel ng-class="{active : apiHistoryCtrl.isEventSelected(eventTimeline)}" class="{{eventTimeline.badgeClass}}">
              <timeline-heading>
                <h5>{{eventTimeline.title | uppercase}}
                  <ng-md-icon class="api-history-icon" ng-show="apiHistoryCtrl.eventToCompareRequired && !apiHistoryCtrl.isEventSelected(eventTimeline)" icon="crop_din"></ng-md-icon>
                  <ng-md-icon class="api-history-icon" ng-show="apiHistoryCtrl.isEventSelectedForComparaison(eventTimeline)" icon="compare" style="fill: green;"></ng-md-icon>
                </h5>
                <p ng-if="eventTimeline.when">
                  <small class="text-muted ng-binding"><i class="glyphicon glyphicon-time"></i>{{eventTimeline.when | date : 'medium'}} by {{eventTimeline.user.displayName}}</small>
                </p>
                <p ng-if="eventTimeline.isCurrentAPI">
                  <small class="text-muted ng-binding"><i class="glyphicon glyphicon-info-sign"></i>In progress API definition</small>
                </p>
              </timeline-heading>
            </timeline-panel>
          </a>
        </timeline-event>
      </div>
    </timeline>
  </div>

  <div class="api-events-content" flex="80">
    <div ng-show="apiHistoryCtrl.eventsSelected.length == 1" class="api-events-content-descriptor">
      <md-card style="box-shadow:none;">
        <div ng-show="apiHistoryCtrl.eventsTimeline.length > 1" style="border: 1px solid #e7eaec; border-bottom: 0;" layout-padding>
          <md-button ng-show="apiHistoryCtrl.eventsSelected[0].isCurrentAPI" class="md-raised" ng-click="apiHistoryCtrl.$scope.$parent.apiCtrl.showDeployAPIConfirm($event, apiHistoryCtrl.api)">Deploy</md-button>
          <md-button permission permission-only="'api-definition-u'" ng-show="(!apiHistoryCtrl.eventsSelected[0].isCurrentAPI && apiHistoryCtrl.eventsSelected[0].event.id != apiHistoryCtrl.events[0].id) || (!apiHistoryCtrl.eventsSelected[0].isCurrentAPI && apiHistoryCtrl.eventsTimeline[0].isCurrentAPI)" class="md-raised" ng-click="apiHistoryCtrl.showRollbackAPIConfirm($event, apiHistoryCtrl.eventSelectedPayload)">Rollback</md-button>
          <md-button ng-show="apiHistoryCtrl.events.length > 0 && apiHistoryCtrl.eventsSelected[0].event.id != apiHistoryCtrl.events[0].id" class="md-raised" ng-click="apiHistoryCtrl.diffWithMaster()">Diff with published API</md-button>
          <md-button ng-show="apiHistoryCtrl.eventsTimeline.length > 1" class="md-raised" ng-click="apiHistoryCtrl.enableDiff()">Diff</md-button>
        </div>
        <md-card-content style="background-color: #fff; border: 1px solid #e7eaec; padding-top: 0px">
          <pre ng-show="!apiHistoryCtrl.diffMode" class="api-history-definition">{{apiHistoryCtrl.eventSelectedPayloadDefinition | json }}</pre>
          <pre ng-show="apiHistoryCtrl.diffMode" class="api-history-definition" gravitee-diff old-value="apiHistoryCtrl.left" new-value="apiHistoryCtrl.right"></pre>
        </md-card-content>
      </md-card>
    </div>
  </div>

</div>
<gravitee-empty-state ng-if="apiHistoryCtrl.eventsTimeline.length == 0"
                      icon="history"
                      model="History"
                      message="Your API History will appear here"
                      sub-message="We will Keep you informed of API changes"></gravitee-empty-state>
